<template>
    <div class="cont">
        <DocumentEditor 
            id="docEditor" 
            ref="editor"
            documentServerUrl="http://192.168.56.58:12345"
            :config="config"
            :events_onDocumentReady="coonDocumentReady"
            :events_onMakeActionLink="documentStateChange"
            :events_onAppReady='onAppReady'
            class="only-office"
        /> 
        <div class="left">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="待插入" name="first">
                    <el-card class="card" v-for="item in variables" :key="item">
                        <div class="el-c-c">
                            <div class="ca-l">
                                {{item.name}}
                            </div>
                            <el-button type="primary" @click="insert(item)">插入</el-button>
                        </div>
                    </el-card>
                </el-tab-pane>
                <el-tab-pane label="已插入" name="second">
                    <el-card class="card" v-for="item in variablesed" :key="item">
                        <div class="el-c-c">
                            <div class="ca-l">
                                {{item.name}}
                            </div>
                            <el-button type="primary" @click="scrollToBookMark(item)">插入</el-button>
                        </div>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
    
</template>

<script setup>
    import { DocumentEditor } from "@onlyoffice/document-editor-vue";
    import { onBeforeMount, onMounted, ref } from "vue";
    import { LoginStore } from '@/store/login';
    import { storeToRefs } from "pinia";

    const wordUrl = 'http://192.168.104.30:8888/download?id=1';
    const wordUrl1 = "https://windtiktok.oss-cn-beijing.aliyuncs.com/%E6%99%BA%E8%83%BD%E6%96%87%E6%A1%A3%E6%96%87%E4%BB%B6%E4%B8%8B%E5%8F%91%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3.docx";
    const wordUrl2 = 'http://10.7.114.112:31984/ms-doc/api/v1/idoc-file/download-simple?id=1160598133797957633&appId=1009549605007003648';

    const callbackUrl = 'http://192.168.104.30:8888/call-only-office';

    const loginRef = storeToRefs(LoginStore());

    // 文档编辑器
    const editor = ref();

    const userInfo = ref({});

    onBeforeMount(() => {
        userInfo.value = loginRef.getInfo.value;
        config.value.editorConfig.user = loginRef.getInfo.value;
    });

    const variables = ref([]);

    const variablesed = ref([]);

    const activeName = ref('first')

    const demo = ref();
    

    onMounted(() => {
        for(let i = 0; i< 10; i++){
            variables.value.push({
                name: `变量${i}`,
                bookMark: `PO_${i}`
            });
        }
        
        // console.log(window.DocsAPI);
        console.log(editor.value);
    });

    const docEditorde = ref();
    
    // 高度
    const height = window.innerHeight - 18;
    const width = window.innerWidth - 350;

    const config = ref({
        // 文档有关的参数配置
        document: {
            key: '1s90s2sd4od00sdsd13al6s',
            fileType: "docx",
            title: "测试文档",
            url: wordUrl1,
            permissions: {
                chat: true,
                comment: true,
                // print: true,
                review: true
            },

        },
        documentType: "word",
        // 编辑器界面有关的配置
        editorConfig: {
            // callbackUrl: "test"
            lang: "zh-CN",
            callbackUrl: callbackUrl,
            // 定制内容
            customization: {
                // anonymous: {
                //     request: true,
                //     label: "风难止"
                // },
                /**
                 * 图片必须为此尺寸：172x40
                 */
                logo: {
                    image: ''
                },
                // 强制保存，即保存按钮是否开启
                forcesave: true,
                customer: { 
                    address: "东华软件", 
                    info: "onlyoffice调研", 
                    logo: "https://example.com/logo-big.png", 
                    logoDark: "https://example.com/dark-logo-big.png", 
                    mail: "dhcc@dhcc.com", 
                    name: "智能文档", 
                    phone: "123456789", 
                    www: "dhcc.com" 
                },
                // 编辑栏是否紧凑
                compactToolbar: false
            }
        },
        height: height,
        width: width
    });
    const bookMarks = ref([]);

    // 文档加载完成钩子
    const coonDocumentReady = () => {
        const connector = docEditorde.value.createConnector();
        connector.callCommand(() => {
            const oDocument = Api.GetDocument();
            const aBookmarks = oDocument.GetAllBookmarksNames();
            
            aBookmarks.forEach(e => {
                oDocument.GetBookmarkRange(e).SetHighlight("none][][hjkjn]");
                // bookMarks.value.push({
                //     name: e,
                //     bookMark: e
                // })
            });
        }, true);
        connector.disconnect();
    }

    // 文档修改钩子
    const documentStateChange = () => {
        console.log("文件被修改了");
        editor.setActionLink('00')
    }

    // only-office 初始化钩子
    const onAppReady = (docEditor) => {
        console.log("正在初始化only-office");
        console.log(docEditor);
        docEditorde.value = docEditor;
        console.log(docEditorde);
    }

    // 滚动到指定位置
    const scrollToBookMark = (variable) => {
        console.log(editor.value);
        console.log(variable);
        const bookMark = variable.bookMark;
        const connector = docEditorde.value.createConnector();
        connector.callCommand(() => {
            const oDocument = Api.GetDocument();
            const oRange = oDocument.GetBookmarkRange('PO_0');
            oRange.Select();
        }, true);
        // 断开连接
        connector.disconnect()
    }

</script>

<style scoped>
    .cont{
        display: flex;
    }
    .left{
        width: 350px;
        height: 95vh;
        overflow: auto;
    }
    .card{
        width: 280px;
        padding: 0px;
        margin: 0 10px 10px 10px;
    }
    .ca-l{
        width: 100px;
    }
    .ca-r{
        width: 30px;
    }
    .el-c-c{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 235px;
    }
    .demo-tabs {
        padding: 15px;
    }
</style>